<template>
  <div class="header">
    <el-dropdown>
      <span class="el-dropdown-link">
        {{ username }}
        <i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item>学期:{{currentTerm}}</el-dropdown-item>
        <el-dropdown-item>个人信息</el-dropdown-item>
        <el-dropdown-item >
          <el-button @click="logout" type="text" >退出登录</el-button>
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
export default {
  name: 'HeadersView',
  data() {
    return {
      username: sessionStorage.getItem('name') || '来者何人',
      currentTerm: sessionStorage.getItem('currentTerm') || '1970-01-01'
    }
  },
  methods: {
    logout() {
      sessionStorage.clear()
      this.$router.push('/')
    }
  }
}
</script>

<style scoped>
.el-dropdown-link {
  cursor: pointer;
  color: #000;
}

.el-icon-arrow-down {
  font-size: 12px;
}
</style>
